<template>
  <view class="search-input-container">
    <v-icon
      size="26rpx"
      :custom-style="{ marginBottom: '4rpx' }"
      src="@/static/icons/magnifier.svg"
    />
    <view class="input-container">
      <v-input
        :model-value="modelValue"
        type="text"
        placeholder="输入关键词搜索"
        confirm-type="search"
        :clearable="clearable"
        :focus="focus"
        @update:model-value="$emit('update:model-value', $event)"
        @confirm="$emit('search')"
        @input="$emit('input')"
        @focus="$emit('focus')"
        @blur="$emit('blur')"
      />
    </view>
    <v-input-clear
      :value="modelValue"
      @click="$emit('update:model-value', '')"
    />
    <view class="search-button" @click="$emit('search')">
      搜索
    </view>
  </view>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    modelValue: string;
    focus?: boolean;
    clearable?: boolean;
  }>(),
  {
    focus: false,
    clearable: true
  }
);

defineEmits<{
  'update:model-value': [val: string];
  search: [];
  input: [];
  focus: [];
  blur: [];
}>();
</script>

<style lang="scss" scoped>
.search-input-container {
  height: 80rpx;
  padding: 0 0 0 30rpx;
  box-sizing: border-box;
  border-radius: 40rpx;
  background-color: #f5f6fa;
  display: flex;
  align-items: center;
  gap: 8rpx;
  .input-container {
    flex: 1;
    overflow: hidden;
  }
  .search-button {
    border-left: 1px solid #cccccc;
    color: #ff2f3b;
    padding: 12rpx 36rpx;
    line-height: 40rpx;
  }
}
</style>
